<template>
  <c-main-template
    minHeight="auto"
    :isBreadcrumb="false"
    class="mr-24 ml-24 mt-24"
  >
    <!-- 从生成出口手续时，生成车辆记录 -->
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">车辆信息：</div>
          <el-input
            size="large"
            placeholder="请输入车辆信息"
            v-model="querys.keyword"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>

      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">车架号：</div>
          <el-input
            size="large"
            placeholder="请输入车架号"
            v-model="querys.vin"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="10">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mg-24"
    minHeight="auto"
    title="车辆记录"
    :isBreadcrumb="false"
  >
    <c-table-template :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="车辆信息" align="center">
        <template #default="scope">
          <span v-for="(item, index) in k" :key="index">
            {{ scope.row[item] }} &nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="车架号"
        prop="vin"
        align="center"
      />
      <el-table-column
        prop="timeCreate"
        label="创建时间"
        align="left"
        width="200"
      >
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleDetails(scope.row)"
          >
            <span>详情</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
</template>
<script setup>
const k = ["brand", "series", "model"];
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const handleDetails = (item) => {
  router.push({
    path: "/VehicleRecord/Details",
    query: {
      id: item.id,
    },
  });
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
  handleReset,
} = useBasicsTable({
  url: "/carList/searcByCarDetailsSeller",
});
</script>